<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>

        <div id="app">
            <h3>书架</h3>
            <ul>
                <li v-for="(item, index) in bookList">
                    <span>{{ item.name }}</span>
                    <span>{{ item.author }}</span>
                    <button @click="del(item.id)">删除</button>
                </li>
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    bookList : [
                        {id: 1, name:"book1", author:"author1"},
                        {id: 2, name:"book2", author:"author2"},
                        {id: 3, name:"book3", author:"author3"},
                        {id: 4, name:"book4", author:"author4"}
                    ]
                },
                methods:{
                    del(id){
                        this.bookList = this.bookList.filter(item => item.id !== id)
                    }
                }
            })
        </script>
    </body>
</html>